<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder="示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
      </el-form-item>

      <!-- 所属分类 -->
      <el-form-item label="课程分类">
        <!-- 一级分类 -->
        <el-select
          v-model="courseInfo.subjectParentId"
          placeholder="一级分类"
          @change="subjectLevelOneChanged(courseInfo.subjectParentId)">
          <el-option
            v-for="subjecct in subjecctOneList"
            :key="subjecct.id"
            :label="subjecct.title"
            :value="subjecct.id"/>
        </el-select>
        <!-- 二级分类 -->
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
          <el-option
            v-for="subjecct in subjecctTwoList"
            :key="subjecct.id"
            :label="subjecct.title"
            :value="subjecct.id"/>
        </el-select>
      </el-form-item>
      

      <!-- 课程讲师 -->
      <el-form-item label="课程讲师">
        <el-select
          v-model="courseInfo.teacherId"
          placeholder="请选择">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
      </el-form-item>

      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description"/>
      </el-form-item>

      <!-- 课程封面-->
      <el-form-item label="课程封面">

        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API+'/eduoss/fileoss/uploadAvatar'"
          class="avatar-uploader">
          <img :src="courseInfo.cover">
        </el-upload>

      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import courseApi from "@/api/edu/course"
import subjectApi from "@/api/edu/subject"
import Tinymce from '@/components/Tinymce'

export default {
  components:{
    Tinymce
  },
  data() {
  return {
    BASE_API: process.env.BASE_API, // 接口API地址
    saveBtnDisabled:false,
    courseInfo:{
      title: '',
      subjectId: '', // 二级分类
      subjectParentId:'', // 一级分类
      teacherId: '',
      lessonNum: 0,
      description: '',
      cover: '/static/上传.png', // 添加默认图片
      price: 0
    },
    courseId: 0,
    teacherList:[],
    subjecctOneList:[],
    subjecctTwoList:[]
  }
  },
  created() {
    if(this.$route.params && this.$route.params.id){
      this.courseId = this.$route.params.id
      // 根据对应id来获取课程信息
      this.getInfo()
      this.getAllTeacherInfo()
    }else{
      this.getAllTeacherInfo()
      this.getOneSubject()
    }
  },
  methods: {
    // 添加课程信息
    addCourseInfo(){
      courseApi.addCourseInfo(this.courseInfo)
      .then(response => {
        this.$message({
          type:'success',
          message:'添加课程信息成功!'
        })
        this.courseId = response.data.courseId
        this.$router.push({path:'/course/chapter/'+ response.data.courseId})
      }).catch(error => {
        this.$message({
          type:'error',
          message:'添加课程信息失败!'
        })
      })
    },
    // 修改课程信息
    updatedCourseInfo(){
      courseApi.updatedCourseInfo(this.courseInfo)
      .then(response => {
        this.$message({
          type:'success',
          message:'修改课程信息成功!'
        })
        this.$router.push({path:'/course/chapter/'+ this.courseId})
      }).catch(error => {
        this.$message({
          type:'error',
          message:'修改课程信息失败!'
        })
      })
    },
    // 添加或者更新课程信息
    saveOrUpdate(){
      if(!this.courseInfo.id){
        this.addCourseInfo()
      }else{
        this.updatedCourseInfo()
      }
    },
    // 查询所有讲师信息
    getAllTeacherInfo(){
      courseApi.getListTeacher()
      .then(response => {
        this.teacherList = response.data.items
      }).catch(error => {
        this.$message({
          type:'error',
          message:'获取讲师信息失败!'
        })
      })
    },
    // 查询所有一级分类
    getOneSubject(){
      subjectApi.getSubjectList()
      .then(response => {
        this.subjecctOneList = response.data.list
      }).catch(error => {
      })
    },
    // 一级分类选项改变时调用的方法,参数为一级分类时的id
    subjectLevelOneChanged(value){
      // 点击一级分类,显示对应的二级分类
      for(var i=0; i<this.subjecctOneList.length; i++){
        var oneSubjectId = this.subjecctOneList[i].id
        if(oneSubjectId === value){
          this.subjecctTwoList = this.subjecctOneList[i].twoSubjectList
          break
        }
      }
      // 重置二级选项卡
      this.courseInfo.subjectId = ''
    },
    // 文件上传之前调用的函数
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      return isJPG && isLt2M
    },
    // 文件上传成功调用函数
    handleAvatarSuccess(res, file){
      // res就是服务器返回的response
      this.courseInfo.cover = res.data.url
    },
    // 根据课程id来获取信息
    getInfo(){
      if(this.courseId && this.courseId != 0){
        courseApi.getCourseInfoByCourseId(this.courseId)
        .then(response => {
          this.courseInfo = response.data.courseInfoVo
          // 查询所有分类
          subjectApi.getSubjectList()
          .then(response => {
            this.subjecctOneList = response.data.list
            // 获取所有一级分类
            for(let i=0;i<this.subjecctOneList.length;i++){
              if(this.courseInfo.subjectParentId == this.subjecctOneList[i].id){
                // 获取二级分类
                // 解释下:由于上面组件已经用v-model来双向绑定了this.courseInfo.subjectId属性,所以我们只要填充下拉列表组件就行
                // 组件会根据对应的key(id)值来设置选中的选项卡
                this.subjecctTwoList = this.subjecctOneList[i].twoSubjectList
              }
            }
          }).catch(error => {
          })
        }).catch(error => {
        })
      }
    }
  },
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>